<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>用户管理--layui后台管理模板 2.0</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="../resources/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="../resources/css/public.css" media="all" />
</head>
<body class="childrenBody">
	<!-- 查询开始 -->
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  	<legend>查询条件</legend>
	</fieldset>
	<form class="layui-form"  id="searchFrm">
	  <div class="layui-form-item">
	    <div class="layui-inline">
	      <label class="layui-form-label">用户名</label>
	      <div class="layui-input-inline">
	        <input type="text" name="username"  autocomplete="off" class="layui-input">
	      </div>
	    </div>
	    <div class="layui-inline">
	      <label class="layui-form-label">用户邮箱</label>
	      <div class="layui-input-inline">
	        <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
	      </div>
	    </div>
	    <div class="layui-inline">
	      <label class="layui-form-label">用户地址</label>
	      <div class="layui-input-inline">
	        <input type="text" name="address"  autocomplete="off" class="layui-input">
	      </div>
	    </div>
	  </div>
	  <div class="layui-form-item" style="text-align: center;">
	    <div class="layui-input-block">
	      <button type="button" class="layui-btn" id="doSearch">查询</button>
	      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
	    </div>
	  </div>
	</form>
	<!-- 查询结束 -->
	<!-- 数据表格开始 -->
	<table class="layui-hide" id="test" lay-filter="test"></table>
	<div id="toolBar" style="display: none;" lay-filter="toolBar">
		<button type="button" class="layui-btn layui-btn-sm layui-btn-warm" lay-event="update">修改</button>
		<button type="button" class="layui-btn  layui-btn-sm layui-btn-danger" lay-event="delete">删除</button>
		<button type="button" class="layui-btn layui-btn-sm" lay-event="view">查看</button>
	</div>
	<div id="tableToolBar" style="display: none;" lay-filter="tableToolBar">
		<button type="button" class="layui-btn layui-btn-sm layui-btn-warm" lay-event="add">添加</button>
		<button type="button" class="layui-btn  layui-btn-sm layui-btn-danger" lay-event="batchDelete">批量删除</button>
	</div>
	<!-- 数据表格结束 -->
	
	<!-- 添加修改开始 -->
	<div id="addAndUpdateUser" style="display: none;">
	<form class="layui-form"  id="dataFrm" lay-filter="dataFrm" style="margin: 10px">
	  	<div class="layui-form-item">
	      <label class="layui-form-label">用户名</label>
	      <div class="layui-input-block">
	        <input type="text" name="username"  autocomplete="off" class="layui-input">
	      </div>
	     </div>
	      <div class="layui-form-item">
	      <label class="layui-form-label">用户城市</label>
	      <div class="layui-input-block">
	        <input type="text" name="city" lay-verify="email" autocomplete="off" class="layui-input">
	      </div>
	    </div>
	    <div class="layui-form-item">
	      <label class="layui-form-label">用户签名</label>
	      <div class="layui-input-block">
	        <input type="text" name="sign"  autocomplete="off" class="layui-input">
	      </div>
	    </div>
	  	<div class="layui-form-item" style="text-align: center;">
	    <div class="layui-input-block">
	      <button type="button" class="layui-btn" lay-submit="" lay-filter="doSubmit">保存</button>
	      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
	    </div>
	    </div>
		</form>
	</div>
	<!-- 添加修改结束-->
	<script src="../resources/layui/layui.js" charset="utf-8"></script>
	
	<script type="text/javascript">
		layui.use([ 'element', 'layer', 'jquery', 'form', 'table' ],
				function() {
					var element = layui.element;
					var layer = layui.layer;
					var $ = layui.jquery;
					var laydate = layui.laydate;
					var form = layui.form;
					var table = layui.table;
					var tableIns=table.render({
					    elem: '#test'  //指渲染的目标  
					    ,url:'../json/users.json'//请求地址
					    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度
					    ,height:'full-200'//设置高度    
					 	,page:true//开启分页
					 	,title:"用户列表"  //设置导出execl时的标题
					 	,text:"查询无数据" //如果列表里面数据为空时显示的数据
					 	,toolbar:"#tableToolBar"//设置显示工具条并设置表头左边的工具类
					 	,defaultToolbar:['print','filter']  //设置默认工具条的显示和顺序
					    ,cols: [ [
					       {type:'checkbox'}
					      ,{field:'id', width:80, title: 'ID', sort: true}
					      ,{field:'username', width:80, title: '用户名',edit:true,align:"center"}
					      ,{field:'sex', width:80, title: '性别', sort: true,templet:function(d){
					    	  return d.sex==0?'女':'男';
					      }}
					      ,{field:'city', width:180, title: '城市'}
					      ,{field:'sign', title: '签名', width: '30%', minWidth: 100} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
					      ,{field:'experience',width:180,  title: '积分', sort: true}
					       ,{field:'score', title: '评分', sort: true,templet:function(d){
					    	  var html;
					    	  if(d.score>=60){
					    		  html="<font color=green>"+d.score+"</font>";
					    	  }else{
					    		  html="<font color=red>"+d.score+"</font>";
					    	  }
					    	  return html;
					      }} 
					      ,{field:'classify', title: '职业'}
					      ,{field:'wealth', width:137, title: '财富', sort: true,hide:true}
					      ,{width:200, title: '操作', toolbar:"#toolBar",align:"center",fixed:"right"}
					    ] ]
					  });
					  //查询
					  $("#doSearch").click(function(){
						  var params=$("#searchFrm").serialize();
						  tableIns.reload({url: 'json/users.json?'+params});
					  });
					//监听表对工具栏事件
					  table.on('toolbar(test)', function(obj){
					    switch(obj.event){
					      case 'add':
					        toAddUser();
					      break;
					      case 'batchDelete':
					        layer.msg('批量删除');
					        var checkStatus = table.checkStatus('test');//test就是<table id="test">
							layer.msg(JSON.stringify(checkStatus.data));
					      break;
					    };
					  });
					//监听行工具栏的事件
					  table.on('tool(test)', function(obj){
						  var data = obj.data; //获得当前行数据
						    switch(obj.event){
						      case 'update':
						        toUpdateUser(data);
						      break;
						      case 'delete':
						        layer.msg('删除'+data.id);
						      break;
						      case 'view':
							     layer.msg('查看'+data.id);
							   break;
						    };
						  });
					
					var url;//提交的url
					var index;//弹出层的索引
					//打开添加用户的弹出层
					function toAddUser(){
						url="user/addUser.action";
						index=layer.open({
							type:1,//弹出层的类型
							title:'添加用户',
							content:$("#addAndUpdateUser"),  //type=1时使用
							skin:'layui-layer-molv',//设置皮肤
							area: ['500px', '300px'],//设置宽高
							shade:0.5,//设置遮罩的透明度
							shadeClose:true,//设置点击遮罩是否关闭弹出层
							maxmin:true, //是否显示最大化和最小化的按钮  该参数值对type:1和type:2有效
							success:function(){
								$("#dataFrm")[0].reset();
							}
						})
					}
					//打开修改的弹出层
					function toUpdateUser(data){
						url="user/updateUser.action";
						index=layer.open({
							type:1,//弹出层的类型
							title:'修改用户',
							content:$("#addAndUpdateUser"),  //type=1时使用
							skin:'layui-layer-molv',//设置皮肤
							area: ['500px', '300px'],//设置宽高
							shade:0.5,//设置遮罩的透明度
							shadeClose:true,//设置点击遮罩是否关闭弹出层
							maxmin:true, //是否显示最大化和最小化的按钮  该参数值对type:1和type:2有效
							success:function(){
								form.val("dataFrm",data);
							}
						})
					}
					//保存
					form.on("submit(doSubmit)",function(obj){
						$.post(url,function(result){
							if(result.code>0){
								layer.msg(result.msg);
							}
							tableIns.reload();
							layer.close(index);
						})
						return false;//禁用同步提交方式
					});
				});
	</script>
</body>
</html>